import React from 'react';
import { useMovieContext } from '../contexts/MovieContext';
import MovieCard from "../components/MovieCard";
import '../css/Favorites.css';

const Favorite = () => {
  const { favorites } = useMovieContext();
  if (favorites) {
    return (
      <div className='favorites'>
        <h2>我的收藏</h2>
        <div className='movies-grid'>
          {favorites.map((movie) => (
            <MovieCard movie={movie} key={movie.id} />
            // <div key={movie.id} className='movie-card'>
            //   <div className='movie-poster'>
            //     <img src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`} alt={mov} />
            //   </div>
            // </div>
          ))}
        </div>
      </div>
    )
  }

  return (
    <div className='favorites-empty'>
      <h2>空空如也~</h2>
      <p>去添加你喜欢的电影吧</p>
    </div>
  )

};
export default Favorite;